<template>
	<view class="register">
		<u-form :model="form" ref="uForm">
			<u-form-item label="账号" label-width="20%">
				<u-input :border="border" v-model="form.username" />
			</u-form-item>
			<u-form-item label="昵称" label-width="20%">
				<u-input :border="border" v-model="form.nickName" />
			</u-form-item>
			<u-form-item label="密码" label-width="20%">
				<u-input :border="border" v-model="form.password" />
			</u-form-item>
			<u-form-item label="性别">
				<u-input :border="border" type="select" :select-open="genderShow" v-model="form.gender" placeholder="请选择性别" @click="genderShow = true"></u-input>
			</u-form-item>
			<u-form-item label="手机号码" label-width="20%">
				<u-input :border="border" v-model="form.phone" />
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="register">注册</u-button>
		<u-toast ref="uToast" />
		<u-action-sheet :list="genderList" v-model="genderShow" @click="genderCallback"></u-action-sheet>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					nickName: '',
					phone: '',
					gender: '',
					password: ''
				},
				border: false,
				genderList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				genderShow: false
			};
		},
		methods: {
			genderCallback: function(index) {
				uni.hideKeyboard();
				this.form.gender = this.genderList[index].text;
			},
			//注册
			register: function() {
				let _self = this;
				_self.$serverData.app_register(_self, _self.form, function(res) {
				
					_self.$localMap.put('user', res.data.data.appUser);
					_self.$localMap.put('token', res.data.data.token);
					_self.$localMap.put('login', res.data.data.status);
				
					_self.$refs.uToast.show({
						title: "注册成功",
						type: 'success'
					});
				
					_self.$routerTo.page('./index/index', 2);
				});

			}
		}
	};
</script>

<style lang="scss" scoped>
	.register{
		margin: 0 50rpx;
	}
</style>
